<template>
  <Modal
    v-model:open="open"
    :title="title"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :width="width || '500px'"
    okText="确定"
    cancelText="取消"
  >
    <div class="pt-5 pr-3px">
      <BasicForm @register="register" />
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Modal } from "ant-design-vue";
import { FormSchema, BasicForm, useForm } from "@/components/Form";

const props = defineProps<{
  title: string;
  addFormSchemas: FormSchema[];
  onOK?: Fn;
  width?: string;
  labelWidth?: number;
  layout?: "horizontal" | "vertical" | "inline";
}>();

const open = ref<boolean>(true);

const [register, { validate }] = useForm({
  schemas: props.addFormSchemas,
  showActionButtonGroup: false,
  labelWidth: props.labelWidth || 80,
  layout: props.layout || "horizontal",
});

async function handleSubmit() {
  const row = await validate();
  if (props.onOK) {
    await props.onOK(row.txt);
  }
  open.value = false;
}
</script>

<style scoped></style>
